<!-- 父组件 -->
<script setup>
// 引用 api
import { ref } from "vue";
// 引用 tab 组件
import Home from '@/components/homeWork/child/Home.vue'
import Profile from '@/components/homeWork/child/Profile.vue'
import Settings from '@/components/homeWork/child/Settings.vue'

// 组件列表
const tabs = [Home, Profile, Settings]

// 按钮列表
const buttoms = ["Home", "Profile", "Settings"]

// 当前的组件
const currentTab = ref(0)

// 点击按钮
function btn(index) {
    currentTab.value = index
}
</script>
<template>
    <input type="button" v-for="(tab, index) in buttoms" :value="tab" @click="btn(index)">
    <component :is="tabs[currentTab]"></component>
</template>